<template>
  <div id="app">
    <div class="table-wraper">
      <div class="search">
        <div class="selectOption">
          <el-input v-model="sellerNameCheck" placeholder="按商户名称搜索"></el-input>
          <el-input v-model="sellerAcountCheck" placeholder="按商户账号搜索"></el-input>
          <el-button type="primary" @click='checkSellerList(1)'>检索</el-button>
        </div>
      </div>
      <div class="main">
        <ul class="listTitle">
          <li v-for='item in titleList'>{{item.label}}</li>
        </ul>
        <ul class="dataList" v-for='(item,index) in tableData'>
          <li>{{index+1}}</li>
          <li><span @click='showSellerInfo(index)'>{{item.shopName | unescape}}</span></li>
          <li>{{item.shopType}}</li>
          <li>{{item.shopKeeper}}</li>
          <li>{{item.telphone}}</li>
          <li>{{item.businessHours}}</li>
          <li @click='showAddress(index)'>{{item.shopAddress | formAddress}}</li>
          <li>{{item.state | stateType}}</li>
          <li>
            <el-button type="success" v-show='item.state != "2"&&item.state != "3"' @click='doSomething(index,1)'>认证</el-button>
            <el-button type="primary" v-show='item.state == "0" || item.state == "1"' @click='doSomething(index,2)'>拒绝</el-button>
            <el-button type="danger" @click='doSomething(index,3)'>删除</el-button>
          </li>
        </ul>
      </div>
      <div class="block pagination" v-show='nullContentPagination'>
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <div class="nullContent" v-show='nullContent'>暂无数据</div>
    </div>
    <div class="bomb userInfo" v-show='sellerInfo'>
      <div class="bomb_header">
        <p>商户详情</p>
        <span @click="hideSellerInfo()"><img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10"></span>
      </div>
      <div class="bomb_content">
        <div class="userDetial">
          <p v-for='item in sellerData'><i>{{item.label}} : </i><span>{{item.val | unescape}}<img :src="item.img" v-show='item.label == "商户Logo"'></span></p>
        </div>
      </div>
    </div>
    <div class="layer" v-show='layer'></div>
    <el-dialog title="拒绝理由" v-model="dialogVisible" size="tiny">
      <el-input v-model="unpassReason" placeholder="请输入拒绝理由"></el-input>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="unpass">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    mapActions,
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        tableData: [],
        sellerData: [],
        titleList: this.$store.state.sellManage.titleList,
        currentPage: 1,
        total: 0,
        sellerNameCheck: '',
        sellerAcountCheck: '',
        unpassReason: '',
        sellerInfo: false,
        layer: false,
        dialogVisible: false,
        currentType: 1,
        sellerId: '',
        nullContent: false,
        nullContentPagination: true,
      }
    },
    watch: {},
    methods: {
      // 获取商户列表
      getSeller(i) {
        this.$store.commit('showLoading');
        this.currentType = 1;
        let list = {
          token: sessionStorage.token,
          pageSize: 10,
          pageNo: i,
          sort: JSON.stringify([{
            property: 'createDate',
            direction: 'DESC'
          }])
        };
        this.getSellerList(list).then((data) => {
          this.$store.commit('hiddenLoading');
          console.log(data);
          if (data.code === 200) {
            this.nullContent = false;
            this.nullContentPagination = true;
            if (data.data.list.length == 0) {
              this.nullContent = true;
              this.nullContentPagination = false;
              this.tableData = data.data.list;
              return;
            }
            this.total = data.data.count;
            this.tableData = data.data.list;
          } else {
            this.$message(data.message);
          }
        }).catch(msg => console.log(msg));
      },
      // 检索用户列表
      checkSellerList(i) {
        this.$store.commit('showLoading');
        this.currentType = 2;
        let list = {
            token: sessionStorage.token,
            pageSize: 10,
            pageNo: i,
            sort: JSON.stringify([{
              property: 'createDate',
              direction: 'DESC'
            }])
          },
          jsonFilter = {};
        if (this.sellerNameCheck != "") {
          jsonFilter.shopName = this.sellerNameCheck;
        }
        if (this.sellerAcountCheck != "") {
          jsonFilter.telphone = this.sellerAcountCheck;
        }
        list.jsonFilter = JSON.stringify(jsonFilter);
        this.getSellerList(list).then((data) => {
          this.$store.commit('hiddenLoading');
          console.log(data);
          if (data.code === 200) {
            this.nullContent = false;
            this.nullContentPagination = true;
            if (data.data.list.length == 0) {
              this.nullContent = true;
              this.nullContentPagination = false;
              this.tableData = data.data.list;
              return;
            }
            this.total = data.data.count;
            this.tableData = data.data.list;
          } else {
            this.$message(data.message);
          }
        }).catch(msg => console.log(msg));
      },
      // 分页跳转
      handleCurrentChange(val) {
        this.currentPage = val;
        if (this.currentType == 1) {
          this.getSeller(val)
        } else {
          this.checkSellerList(val)
        }
      },
      // 显示地址详细信息
      showAddress(i) {
        this.$alert(this.tableData[i].shopAddress.shopAddress, '商户地址', {
          confirmButtonText: '确定',
        });
      },
      // 显示商户详细信息
      showSellerInfo(i) {
        this.sellerInfo = this.layer = true;
        let list = {
          token: sessionStorage.token,
          id: this.tableData[i].id
        }
        this.getSellerInfo(list).then((data) => {
          console.log(data);
          if (data.code === 200) {
            if (data.data.logoImage == '' || data.data.logoImage == null) {
              data.data.logoImage = '../../static/img/icon_xinjian_picture@2x.png'
            }
            switch (Number(data.data.state)) {
              case 0:
                data.data.state = '未认证'
                break;
              case 1:
                data.data.state = '等待认证'
                break;
              case 2:
                data.data.state = '认证成功'
                break;
              case 3:
                data.data.state = '认证失败'
                break;
            }
            let dataList = [{
                label: '商户Logo',
                img: data.data.logoImage
              },
              {
                label: '商户名称',
                val: data.data.shopName
              },
              {
                label: '商户Id',
                val: data.data.merchantId
              },
              {
                label: '所属行业',
                val: data.data.shopType
              },
              {
                label: '负责人姓名',
                val: data.data.shopKeeper
              },
              {
                label: '电话',
                val: data.data.telphone
              },
              {
                label: '推广人识别码',
                val: data.data.promoterCode
              },
              {
                label: '简单介绍',
                val: data.data.discription
              },
              {
                label: '审核状态',
                val: data.data.state
              },
              {
                label: '营业时间',
                val: data.data.businessHours
              },
              {
                label: '商户地址',
                val: data.data.shopAddress.shopAddress
              },
            ]
            this.sellerData = dataList;
          } else {
            this.$message(data.message);
          }
        }).catch(msg => console.log(msg));
      },
      // 关闭用户详细信息
      hideSellerInfo() {
        this.sellerInfo = this.layer = false;
        this.sellerData = [];
      },
      // 1认证/2拒绝/3删除
      doSomething(i, o) {
        let id = this.tableData[i].id,
          list = {
            token: sessionStorage.token,
            id: id
          }
        if (o == 1) {
          list.state = '2';
          this.$confirm('确定通过认证?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.verify(list);
          })
        } else if (o == 2) {
          this.openUnpass();
          this.sellerId = id;
        } else {
          this.$confirm('确定删除这条信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.delete(i);
          })
        }
      },
      // 审核
      verify(list) {
        this.verifySeller(list).then((data) => {
          console.log(data);
          if (data.code === 200) {
            this.$message.success('审核成功!');
            this.getSeller(this.currentPage);
          } else {
            this.$message(data.message);
          }
        }).catch(msg => console.log(msg));
      },
      // 打开拒绝理由
      openUnpass() {
        this.dialogVisible = true;
      },
      // 拒绝
      unpass() {
        let list = {
          token: sessionStorage.token,
          id: this.sellerId,
          remark: this.unpassReason,
          state: '3'
        }
        if (this.unpassReason == '') {
          this.$message.warning('请输入拒绝理由!')
        } else {
          this.dialogVisible = false;
          this.verify(list);
        }
      },
      // 删除
      delete(i) {
        let list = {
          token: sessionStorage.token,
          id: this.tableData[i].id
        };
        this.deleteSeller(list).then((data) => {
          console.log(data);
          if (data.code === 200) {
            this.$message.success('删除成功!');
          } else {
            this.$message(data.message);
          }
        }).catch(msg => console.log(msg));
        this.getSeller(this.currentPage);
      },
      ...mapActions(['getSellerList', 'getSellerInfo', 'verifySeller', 'deleteSeller'])
    },
    created: function() {
      this.getSeller(1);
    },
    filters: {
      stateType(o) {
        switch (Number(o)) {
          case 0:
            return '未认证'
            break;
          case 1:
            return '等待认证'
            break;
          case 2:
            return '认证成功'
            break;
          case 3:
            return '认证失败'
            break;
        }
      },
      formAddress(o) {
        if (o == '' || o == null) {
          return '';
        } else {
          return o.shopAddress;
        }
      },
      unescape(o) {
        if (o != null && o != undefined) return decodeURI(o);
        else return o;
      }
    }
  }
</script>

<style scoped>
  #app {
    position: relative;
  }
  .table-wraper {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
  }
  .search {
    width: 100%;
    padding: 6px 20px 0 0;
    background-color: #efefef;
    height: 48px;
    margin-bottom: 10px
  }
  .el-table {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
  }

  .balance div {
    color: rgb(0, 160, 233);
    cursor: pointer;
  }
  .selectOption {
    float: right;
    text-align: right;
  }
  .search .checkRadio {
    float: left;
    width: 410px;
    text-align: left;
  }
  .checkRadio ul {
    display: inline-block;
    height: 35px;
    line-height: 35px;
  }
  .checkRadio li {
    float: left;
  }
  .el-input {
    width: 200px;
  }
  .locationCheck {
    width: 200px;
    margin-top: 3px;
  }
  .listTitle li:last-child,
  .dataList li:last-child {
    border-right: none;
  }
  .listTitle li:nth-child(1),
  .dataList li:nth-child(1) {
    width: 4%;
  }
  .listTitle li:nth-child(2),
  .dataList li:nth-child(2) {
    width: 10%;
    padding: 0 5px;
  }
  .listTitle li:nth-child(3),
  .dataList li:nth-child(3) {
    width: 7%;
  }
  .listTitle li:nth-child(4),
  .dataList li:nth-child(4) {
    width: 8%;
    padding: 0 5px;
  }
  .listTitle li:nth-child(5),
  .dataList li:nth-child(5) {
    width: 10%;
  }
  .listTitle li:nth-child(6),
  .dataList li:nth-child(6) {
    width: 9%;
  }
  .listTitle li:nth-child(7),
  .dataList li:nth-child(7) {
    width: 26%;
  }
  .listTitle li:nth-child(8),
  .dataList li:nth-child(8) {
    width: 8%;
  }
  .listTitle li:nth-child(9),
  .dataList li:nth-child(9) {
    width: 18%;
  }
  .dataList li:nth-child(2),
  .dataList li:nth-child(7) {
    color: #35C885;
    cursor: pointer;
    padding: 0 5px;
  }
  .userInfo {
    width: 435px;
  }
  .userInfo .bomb_content {
    height: 450px;
    border: none;
  }
  .userDetial {
    padding-top: 20px;
    width: 100%;
    max-height: 465px;
    overflow-y: scroll;
  }
  .userDetial p {
    width: 100%;
    font-size: 15px;
    padding: 5px 15px;
    text-align: left;
    margin: 0;
    max-height: 300px;
    overflow: hidden;
    color: #1F2D3D;
  }
  .userDetial p:nth-child(1){
    line-height:90px;
  }
  .userDetial p span {
    color: #324057;
    display: block;
    float: right;
    text-align: left;
    width: 72%;
    padding-left:15px;
  }
  .userDetial p i {
      font-style: inherit;
      display: block;
      float: left;
      width: 28%;
      text-align:right;
      padding-right:5px;
  }
  .userDetial p img {
    width: 80px;
  }
  .userInfoClose {
    position: absolute;
    top: 35px;
    right: 50px;
    cursor: pointer;
  }
  .el-select {
    margin-top: 3px;
  }
  .checkButton {
    width: 100px;
  }
  .resizeWith {
    width: 200px;
  }
  .el-date-editor.el-input {
    width: 200px;
  }
  ul {
    margin: 0;
  }
  .el-button+.el-button {
    margin: 0;
  }
  .userDetial p:nth-child(14) span {
    cursor: pointer;
    color: rgb(0, 160, 233);
  }
  .lossMoney {
    color: red;
  }
  .record {
    cursor: pointer;
  }
  .el-dialog .el-input {
    width: 80%;
  }   
  .search {
        width: 100%;
        padding: 6px 20px 0 0;
        background-color: #efefef;
        height: 48px;
        margin-bottom: 10px
    }
    .selectOption {
        float: right;
        text-align: right;
    }
    .checkBtn {
        width: 96px;
    }
</style>
